<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-Tree</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Tree Context Menu</h2>
		<p>Right click on a node to display context menu.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul id="tt" class="easyui-tree" data-options="
					url: '../json/tree_data1.json',
					method: 'get',
					animate: true,
					onContextMenu: function(e,node){
						e.preventDefault();
						$(this).tree('select',node.target);
						$('#mm').menu('show',{
							left: e.pageX,
							top: e.pageY
						});
					}
				"></ul>
		</div>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'fa fa-plus'">Append</div>
			<div onclick="removeit()" data-options="iconCls:'fa fa-minus'">Remove</div>
			<div class="menu-sep"></div>
			<div onclick="expand()">Expand</div>
			<div onclick="collapse()">Collapse</div>
		</div>
		<script type="text/javascript">
			function append(){
				var t = $('#tt');
				var node = t.tree('getSelected');
				t.tree('append', {
					parent: (node?node.target:null),
					data: [{
						text: 'new item1'
					},{
						text: 'new item2'
					}]
				});
			}
			function removeit(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('remove', node.target);
			}
			function collapse(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('collapse',node.target);
			}
			function expand(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('expand',node.target);
			}
		</script>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Tree Lines</h2>
		<p>This sample shows how to show tree lines.</p>
		<div style="margin:10px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul class="easyui-tree" data-options="url:'../json/tree_data1.json',method:'get',animate:true,lines:true"></ul>
		</div>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Tree Node Icons</h2>
		<p>This sample illustrates how to add icons to tree node.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul class="easyui-tree" data-options="url:'../json/tree_data2.json',method:'get',animate:true"></ul>
		</div>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Editable Tree</h2>
		<p>Click the node to begin edit, press enter key to stop edit or esc key to cancel edit.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul id="tt" class="easyui-tree" data-options="
				url: '../json/tree_data1.json',
				method: 'get',
				animate: true,
				onClick: function(node){
					$(this).tree('beginEdit',node.target);
				}
			">
			</ul>
		</div>
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		<h2>Tree Context Menu</h2>
		<p>Right click on a node to display context menu.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul id="tt" class="easyui-tree" data-options="
				url: '../json/tree_data1.json',
				method: 'get',
				animate: true,
				onContextMenu: function(e,node){
					e.preventDefault();
					$(this).tree('select',node.target);
					$('#mm').menu('show',{
						left: e.pageX,
						top: e.pageY
					});
				}
			">
			</ul>
		</div>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
			<div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
			<div class="menu-sep"></div>
			<div onclick="expand()">Expand</div>
			<div onclick="collapse()">Collapse</div>
		</div>
		<script type="text/javascript">
			function append(){
				var t = $('#tt');
				var node = t.tree('getSelected');
				t.tree('append', {
					parent: (node?node.target:null),
					data: [{
						text: 'new item1'
					},{
						text: 'new item2'
					}]
				});
			}
			function removeit(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('remove', node.target);
			}
			function collapse(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('collapse',node.target);
			}
			function expand(){
				var node = $('#tt').tree('getSelected');
				$('#tt').tree('expand',node.target);
			}
		</script>
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>CheckBox Tree</h2>
		<p>Tree nodes with check boxes.</p>
		<div style="margin:20px 0;">
			<a href="#" class="easyui-linkbutton" onclick="getChecked()">GetChecked</a> 
		</div>
		<div style="margin:10px 0">
			<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck 
			<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
		</div>
		<div class="easyui-panel" style="padding:5px">
			<ul id="tt" class="easyui-tree" data-options="url:'../json/tree_data1.json',method:'get',animate:true,checkbox:true"></ul>
		</div>
		<script type="text/javascript">
			function getChecked(){
				var nodes = $('#tt').tree('getChecked');
				var s = '';
				for(var i=0; i<nodes.length; i++){
					if (s != '') s += ',';
					s += nodes[i].text;
				}
				alert(s);
			}
		</script>
			
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Drag Drop Tree Nodes</h2>
		<p>Press mouse down and drag a node to another position.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul class="easyui-tree" data-options="url:'../json/tree_data1.json',method:'get',animate:true,dnd:true"></ul>
		</div>
			
			
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Formatting Tree Nodes</h2>
		<p>This example shows how to display extra information on nodes.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="padding:5px">
			<ul class="easyui-tree" data-options="
					url:'../json/tree_data1.json',
					method:'get',
					animate:true,
					formatter:function(node){
						var s = node.text;
						if (node.children){
							s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
						}
						return s;
					}
				">
			</ul>
		</div>
			
			
		<!----------------------------------------------------------------------------------------------------------------------------->
		<!----------------------------------------------------------------------------------------------------------------------------->
		<!----------------------------------------------------------------------------------------------------------------------------->
		<!----------------------------------------------------------------------------------------------------------------------------->
		<!----------------------------------------------------------------------------------------------------------------------------->
		
		
		
		
		
		
	</body>

</html>